<template>
  <div>
    <view-box>
      <x-header slot="header" :left-options="{showBack: true,preventGoBack:true}"
                @on-click-back="goBack" theme="" class="queryHeader">保险方案
      </x-header>
      <group>
        <swipeout>
          <swipeout-item transition-mode="follow" v-for="(list , index) in currentSchemes" :key="index">
            <div slot="right-menu">
              <swipeout-button @click.native="swipeDelete(index)" type="warn">删除</swipeout-button>
            </div>
            <div slot="content" class="demo-content vux-1px-t">
              <div>
                <cell
                  :title="'方案'+list.insuredTarget"
                  is-link
                  :border-intent="false"
                  :arrow-direction="currentIndex === index+9999 ? 'up' : 'down'"
                  @click.native="openContent(index)">
                  <i slot="icon" class="iconfont icon-createtask_fill" style="color:#4A90E2;padding-right: 5px;"></i>
                </cell>
                <template v-if="currentIndex === index+9999">
                  <cell :value="list.insuredTarget" title="保险对象"></cell>
                  <cell :value="list.targetName" title="对象名称"></cell>
                  <cell :value="list.occupationType" title="职业类别"></cell>
                  <cell :value="list.peoples" title="人数"></cell>
                  <cell :value="list.avgAges" title="平均年龄"></cell>
                  <cell :value="list.insuredLength + list.insuredFlagName" title="保险期间"></cell>
                  <cell title="责任信息" is-link style="padding: 11px 15px;" @click.native="viewInsurances(index)">
                    <span slot="default">查看</span>
                  </cell>
                </template>
              </div>
            </div>
          </swipeout-item>
        </swipeout>
      </group>
      <box gap="10px 10px">
        <x-button type="primary" class="positiveBtn" @click.native="addInsurances">添加
        </x-button>
      </box>
      <popup v-model="showToast" position="top" :show-mask="false">
        <div class="position-vertical-demo">
          {{toastTxt}}
        </div>
      </popup>
      <x-dialog :show.sync="showModal" class="dialog-demo">
        <div class="img-box">
          <swiper height="350px" dots-position="center">
            <swiper-item class="black" v-for="(item,index) in duties" :key="index">
              <p style="background-color: #ffe26d;padding: 8px;">{{item.dutyName}}({{index + 1}}/{{duties.length}})</p>
              <group class="swiperGroup" v-if="item.amnt">
                <cell title="保险金额（元）">
                  <countup :end-val="Number(item.amnt)" :duration="3" :decimals="0"></countup>
                </cell>
              </group>
              <group class="swiperGroup" v-if="item.disableAsstandard">
                <cell title="评定标准">{{standard[item.disableAsstandard - 1]}}</cell>
              </group>
              <group class="swiperGroup" v-if="item.industryPaymentProp">
                <cell title="行标赔付比例">{{claims[item.industryPaymentProp - 1]}}</cell>
              </group>
              <group class="swiperGroup" v-if="item.jobPaymentProp">
                <cell title="工标赔付比例">{{claims[item.jobPaymentProp - 1]}}</cell>
              </group>
              <group class="swiperGroup" v-if="item.deductible">
                <cell title="免赔额（元）">{{item.deductible}}</cell>
              </group>
              <group class="swiperGroup" v-if="item.deductibleRate*100 !== 0">
                <cell title="赔付比例（%）">{{item.deductibleRate * 100}}%</cell>
              </group>
              <group class="swiperGroup" v-if="item.deductibleDats">
                <cell title="免赔天数">{{item.deductibleDats}}</cell>
              </group>
              <group class="swiperGroup" v-if="item.currentPremium">
                <cell title="当前保费（元/人）">{{item.currentPremium}}</cell>
              </group>
            </swiper-item>
          </swiper>
        </div>
        <div @click="showModal = false" style="background-color: cornsilk;padding: 10px">
          <span class="vux-close">关闭</span>
        </div>
      </x-dialog>
    </view-box>
  </div>
</template>
<script>
  import {
    XHeader,
    Group,
    Cell,
    Popup,
    Swiper,
    SwiperItem,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    Box,
    XButton,
    XDialog,
    Countup,
    ViewBox
  } from 'Vux'
  export default {
    components: {
      XHeader,
      Group,
      Cell,
      Popup,
      Swiper,
      SwiperItem,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      Box,
      XButton,
      XDialog,
      Countup,
      ViewBox
    },
    data(){
      return {
        showModal: false,
        showToast: false,
        toastTxt: "",
        currentSchemes: [],
        currentIndex: 1,
        ios: true,
        duties: [],
        claims: ["3%-5%-7%", "5%-10%-15%", "10%-12%-18%", "10%-20%-30%"],
        standard: ["行业标准", "工伤标准", "工伤按工伤、非工伤按行标"]
      }
    },
    //监听popup
    watch: {
      showToast (val) {
        if (val) {
          setTimeout(() => {
            this.showToast = false
          }, 1500)
        }
      }
    },
    methods: {
      //唤起toast提示
      vuxToast(info){
        this.showToast = true;
        this.toastTxt = info;
      },
      //返回录入页面
      goBack(){
        this.$router.push('/inquiry');
        this.$store.commit('CHANGE_TRANSITION', 'right');
        this.$store.commit('INIT_CURRENT_INDEX', 3)
      },
      //点击展开项目
      openContent(index){
        if (index + 9999 === this.currentIndex) {
          this.currentIndex = (index + 9999) * (-1)
        } else {
          this.currentIndex = index + 9999
        }
      },
      //侧滑操作-删除
      swipeDelete(index){
        let thus = this;
        this.$vux.confirm.show({
          theme: thus.ios ? 'ios' : 'android',
          title: '提示',
          content: '删除此条方案信息',
          confirmText: '确定',
          cancelText: '取消',
          onCancel () {
            thus.$vux.confirm.hide()
          },
          onConfirm () {
            if (thus.currentSchemes.length > 0) {
              thus.$store.commit('REMOVE_HAD_INSURANCES');
              thus.$store.commit('SAVE_FASTEN_UNIT', null);
              thus.$store.commit('REMOVE_SOME_SCHEME', index);
              thus.currentSchemes = thus.$store.state.app.originSchemeInfo;
              thus.vuxToast('删除成功！')
            }
          }
        })
      },
      //查看责任信息
      viewInsurances(index){
        this.duties = this.currentSchemes[index].duties;
        this.showModal = true
      },
      //添加新方案
      addInsurances(){
        if (this.currentSchemes.length === 2) {
          this.vuxToast("目前仅支持录入2种方案")
        } else {
          this.$store.commit('SAVE_FASTEN_UNIT', null);
          this.$router.push('/addScheme');
          this.$store.commit('CHANGE_TRANSITION', 'left')
        }
      }
    },
    mounted(){
      this.$store.commit('REMOVE_SCHEME');
      let originSchemeInfo = this.$store.state.app.originSchemeInfo;
      this.currentSchemes = originSchemeInfo;
      this.ios = this.$store.state.app.ios;
    }
  }
</script>
